<template>
    <div class="header-container">
        <header>
            <img src="../assets/img/logo.png" @click='returnMainUrl'/>
            <ul class="navbar">
                <li>
                    <LangSelect></LangSelect>
                </li>
            </ul>
        </header>

    </div>
</template>

<script scoped>
import LangSelect from '@/components/LangSelect'
import md5 from 'js-md5'
export default {
    name:'Header',
    components:{
        LangSelect
    },
    props:{
        returnMain:{
            type:String
        },
        sn:{
            type:String
        }
    },
    data(){
        return {
        }
    },
    mounted(){
    },
    methods:{
        returnMainUrl(){
            console.log(this.returnMain,'returnMain');
            this.$router.push({path:this.returnMain,query:{sn:this.sn}})
        }
    }
}
</script>

<style lang="less">
@color_box_bg:#EFEFEF;
@color_title:#444;
@color_text:#636162;
@color_unit:#636162;
@color_light:#ff8920;
@border_bottom:1px dashed #D1D1D1;
@border_radius:3px;
@color_unit:#8a8a8a;
.header-container header{
    background:#4E4D52;
    height: 70px;
    position: relative;
    img{
        height: 40px;
        vertical-align: baseline;
        position: absolute;
        top: 15px;
        left: 10px;
    }
    ul.navbar{
        float: right;
        >li{
            
            float: left;
            list-style: none;
            color:#999;
            font-size: 14px;
            cursor: pointer;
            .el-dropdown{
                color:#999;
            }
        }
        .padding,.el-dropdown-link{
            padding: 25px 10px;
            display: inline-block;
            &:hover{
                background: rgba(255,255,255,.1);
            }
        }
        .language{
            .el-dropdown-menu__item {
                list-style: none;
                line-height: 25px;
                padding: 0 20px;
                margin: 0;
                font-size: 14px;
                color: #606266;
                cursor: pointer;
                outline: 0;
                border-bottom: 1px dashed rgba(0,0,0,0.1);
            }
        }
    }
    .icon-warning-round{
        color: red;
        position: absolute;
        top: 20px;
        right: 0px;
        font-size: 14px;
    }
}
.el-dropdown-menu.alarmBox{
    color:@color_text;
    min-width: 300px;
    // background: @color_box_bg;
    .box_header{
        padding: 10px;
        max-width: 357px;
        line-height: 25px;
        p{
            margin: 0;
            span{
                color: @color_light;
            }
        }
        .right{
            text-align: right;
        }
    }
    .box_body{
        >li{
            border-bottom: 1px solid #efefef;
            padding: 6px 10px;
            font-size: 14px;
        }
        .info{
            padding: 0;
            border:none;
            background: transparent;
            cursor: default;
            .icon-warning{
                color: #faad14;
            }
            .pointer{
                cursor: pointer;
            }
            div{
                width: 300px;
                padding:0 15px 0 5px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: inline-block;
            }
        }
    }
    .box_footer{
        text-align: center;
        .el-link {
            color: @color_light;
        }
        &.handle{
            padding: 5px 10px;
            span{
                float: right;
                padding-left: 10px;
                i{
                    font-size: 20px;
                    &:hover{
                        color: @color_light;
                        cursor: pointer;
                    }
                }
            }
        }
    }
    .el-dropdown-menu--small .el-dropdown-menu__item {
        padding: 0;
    }
    
}
ul.popover{
    li{
        padding: 5px 0;
        &:not(:last-child){
            border-bottom: 1px solid #efefef;
        }
    }
}
</style>